<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<style>
			#div1 input{
				background: white;
			}
			#div1 input.active{
				background: yellow;
			}
			#div1 div{
				padding: 10px 10px;
				width: 203px;
				height: 150px;
				background: #ccc;
				display: none;
			}
			#div1 div.active{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="div1">
		<input type="button"value="前端开发"  class="active"/>
		<input type="button"value="Android开发"class="active1" />
		<input type="button"value="Ul设计" class="active2"/>
		<div class="active">HTML5\css\javaScript\JS框架</div>
		<div class="active1">Java\Android原生\混合</div>
		<div class="active2">PS\设计基础</div>
		</div>
		<script>
		//获取元素对象
		var dom=document.getElementById('div1');
		//获取按钮
		var btns=dom.getElementsByTagName('input');
		//获取div框（数组）
		var divs=dom.getElementsByTagName('div');
		//循环：给3个按钮添加点击事件（函数）
		for(var i=0;i<btns.length;i++){
			btns[i].onclick=function(){
				//点击某个按钮：改变按钮背景色； 下面div框是否显示
				//1、所有按钮背景色白色；当前点击的按钮背景色黄色
				for(var j=0;j<btns.length;j++){
					btns[j].style.background='white';
				}
				this.style.background='yellow';
				for(var k=0;k<divs.length;k++){
					if(this==btns[k]){
						divs[k].style.display='block';
					}else{
						divs[k].style.display='none';
					}
				}
			}
		}
		
	</script>
	</body>
</html>
